<template>
  <view class="container bg-grey pad20">
    <view class="inner flex flex-col">
      <u-tabs
        class="bg-white radius20 shadow-line w100"
        ref="tabs"
		active-color="#080808"
        :list="tabsList"
        :is-scroll="false"
        :offset="[10, 90]"
        :current="current"
        @change="changeTab"
      ></u-tabs>
      <view class="bg-white radius15 shadow-line pad20 flex j-s marv20 w100">
        <u-icon name="eye" label="查看全部" @click="allRead"></u-icon>
      </view>
    </view>
    <scroll-view
      scroll-y
      v-if="mesList.length"
      class="page-body-tab radius20 shadow-line"
    >
      <u-cell-group class="info-content bg-white">
        <u-swipe-action
          :show="item.show"
          :options="options"
          v-for="item in mesList"
          @click="(index, index1) => clickAction(index1, item)"
          :key="item.id"
        >
          <u-cell-item
            use-label-slot
            @click="toDetail(item)"
            title="Notice"
            title-width="480"
            :value="$u.timeFrom(item.createdAt, 'mm-dd')"
            :arrow="false"
          >
            <view slot="label" class="u-line-1">{{ item.title }}</view>
            <view slot="right-icon" class="dot" v-if="!item.status"></view>
            <u-avatar
              slot="icon"
              src="/static/images/order/mes2.png"
            ></u-avatar>
          </u-cell-item>
        </u-swipe-action>
      </u-cell-group>
    </scroll-view>
    <sb-empty v-else />
  </view>
</template>

<script>
export default {
  data() {
    return {
      mesList: [],
      tabsList: [{ name: "订单动态", count: 0 }, { name: "公告" }],
      queryParams: {
        pageSize: 10,
        pageIndex: 1,
        receiverType: 2,
        type: 1,
      },
      current: 0,
      options: [
        {
          text: "Delete",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
    };
  },
  onLoad() {
    if (!this.$checkLogin()) return this.$redirect2Login();
  },
  //下拉刷新
  onPullDownRefresh() {
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 500);
    this.queryParams.pageIndex = 1;
    this.getMeslist();
  },
  //上拉触底，加载下一页
  onReachBottom() {
    this.queryParams.pageIndex += 10;
    this.getMeslist();
  },
  onShow() {
    this.getMeslist();
  },
  methods: {
    async getMeslist() {
      let { success, data } = await this.$get("/notice/list", this.queryParams);
      if (data)
        this.mesList =
          this.queryParams.pageIndex === 1
            ? data.rows
            : this.mesList.concat(data.rows);
      console.log(this.mesList);
      let res = await this.$get("/notice/unread-count");
      this.tabsList[0].count = res.data;
    },
    async toDetail(item) {
      let { success } = await this.$postB("/notice/read", {
        id: item.id,
      });
      if (success) this.$go2(`./mes-detail?id=${item.id}`);
    },
    async allRead() {
      const unreadList = this.mesList
        .filter((f) => f.status === 0)
        .map((m) => m.id);
      let { success } = await this.$postB("/notice/read", {
        id: unreadList,
      });
      if (success) this.getMeslist();
    },
    async clickAction(index, item) {
      //删除
      let { success } = await this.$postB("/notice/del", {
        id: item.id,
      });
      if (success) this.getMeslist();
    },
    changeTab(index) {
      this.current = index;
      this.queryParams.pageIndex = 1;
      this.queryParams.type = index + 1;
      this.getMeslist();
    },
  },
};
</script>

<style lang="scss" scoped>
.dot {
  width: 16rpx;
  height: 16rpx;
  background: $main-color;
  border-radius: 50%;
  position: absolute;
  bottom: 20rpx;
  right: 40rpx;
}

.container {
  /deep/ {
    .u-tabbar__content {
      position: absolute;
    }
  }
}
.page-body-tab {
  height: calc(100vh - 183px);
}
</style>
